<template>
	<view class="main animate__animated animate__fadeIn">
		<map
			class="map"
			:latitude="location.lat"
			:longitude="location.lng"
			scale="20"
			theme="satellite"
			:min-scale="16"
			:max-scale="20"
			:enable:-zoom="true"
			:enable-scroll="true"
			:enable-rotate="true"
			:markers="covers"
			:circles="circles"
		>
		</map>
		<view
			v-if="indexStore.data.msg_show"
			class="msg flex align-center animate__animated animate__fadeInDown"
			:class="!status.new ? 'animate__fadeOutUp' : ''"
		>
			<image class="icon" src="/static/images/news.png" mode="widthFix"></image>
			<view class="flex1 text">{{ $t("index.title") }}</view>
			<image
				class="icon"
				src="/static/images/close.png"
				mode="widthFix"
				@click="closeMsg"
			></image>
		</view>
		<view
			class="code animate__fadeInRight animate__animated"
			@click="toCarcard"
		>
		</view>
		<view
			class="park animate__fadeInRight animate__animated"
			@click="indexStore.data.pull_show = true"
		>
		</view>
		<image
			class="site animate__animated animate__fadeInLeft"
			src="/static/images/site.png"
			mode="widthFix"
		></image>
		<view class="accident flex flex-center">
			<image class="img" src="/static/images/zhuiwei.png" mode="widthFix"></image>
			<view class="info flex1">
				<view class="title">{{ $t("data.data1") }}</view>
				<view class="address overflow1">{{ $t("data.data2") }}</view>
				<view class="date">2018.12.07</view>
			</view>
			<cl-icon name="arrow-right" :size="52"></cl-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCool,useStore } from "/@/cool";
import { ref, reactive } from "vue";
import siteicon from "@/static/images/dangqian.png";
import { useIndexStore } from "../store/index";
const { user } = useStore();
const { router, service } = useCool();
const indexStore = useIndexStore();
const status = reactive({
	new: true,
});
const location = ref({
	lat: "37.858464",
	lng: "112.512137",
});

const covers = ref([
	{
		id: 1,
		latitude: 37.858464,
		longitude: 112.512137,
		iconPath: siteicon,
		width: 40,
		height: 40,
	},
]);

const circles = ref([
	{
		latitude: 37.858464,
		longitude: 112.512137,
		color: "#0C81F720",
		fillColor: "#0C81F720",
		radius: 40,
	},
]);

const closeMsg = () => {
	status.new = false;
	setTimeout(() => (indexStore.data.msg_show = false), 500);
};

const toCarcard = () => {
	if (user.info) {
		router.push('/pages/user/carcard')
	} else {
		router.login()
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	.map {
		width: 100%;
		height: calc(100vh - 300rpx);
	}
	.msg {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		width: calc(100% - 60rpx);
		height: 80rpx;
		background: #ffffff;
		opacity: 0.9;
		padding: 0 20rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
		.icon {
			width: 36rpx;
			height: 36rpx;
		}
		.text {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			margin-left: 12rpx;
		}
	}
	.code {
		width: 88rpx;
		height: 88rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(85, 85, 85, 0.2);
		border-radius: 50%;
		position: absolute;
		bottom: 420rpx;
		right: 30rpx;
		background-image: url(/static/images/code.png);
		background-position: center center;
		background-size: 44rpx 44rpx;
		background-repeat: no-repeat;
	}

	.park {
		width: 88rpx;
		height: 88rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(85, 85, 85, 0.2);
		border-radius: 50%;
		position: absolute;
		bottom: 300rpx;
		right: 30rpx;
		background-image: url(/static/images/p.png);
		background-position: center center;
		background-size: 32rpx 46rpx;
		background-repeat: no-repeat;
	}
	.site {
		width: 82rpx;
		height: 82rpx;
		position: absolute;
		bottom: 290rpx;
		left: 30rpx;
	}
	.accident {
		width: calc(100% - 60rpx);
		left: 30rpx;
		bottom: 70rpx;
		position: absolute;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(85, 85, 85, 0.2);
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		.info {
			width: 1rpx;
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}
			.address {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 44rpx;
			}
			.date {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 44rpx;
			}
		}
	}
}
</style>
